import React, { useEffect, useRef } from 'react';

const AutoPlayAudio = (props) => {
    const {src} = props;
    console.log('播放器',src);
  const audioRef = useRef(null);

  useEffect(() => {
    
    
    const audio = audioRef.current;
    if (audio) {
      // 尝试自动播放音频
      audio.play().catch(error => {
        console.error('自动播放音频失败：', error);
        // 处理自动播放失败的情况，例如显示一个错误消息或提供一个手动播放的按钮
      });
    }
  }, [src]); // 当 src 变化时，重新运行这个 effect

  // 如果自动播放失败，你可以提供一个手动播放的函数
  const handlePlay = () => {
    const audio = audioRef.current;
    if (audio && !audio.paused) {
      audio.pause();
    } else if (audio) {
      audio.play().catch(error => {
        console.error('手动播放音频失败：', error);
      });
    }
  };

  // 渲染组件时，检查是否需要显示播放按钮（基于你的应用逻辑）
  let playButton = null;
  // 例如，你可以设置一个状态来跟踪自动播放是否成功，但在这个简单示例中我们不会这样做
  // 相反，我们可以始终显示播放按钮作为一个备用方案
  playButton = (
    <button onClick={handlePlay} disabled={!src}>
      {/* 根据音频的播放状态显示不同的按钮文本 */}
      {audioRef.current && audioRef.current.paused ? '播放音频' : '暂停音频'}
    </button>
  );

  return (
    <div>
      {/* 显示播放按钮，即使自动播放可能已经尝试过了 */}
      {/* {playButton} */}
      
      {/* 音频元素，使用 ref 引用，但隐藏它 */}
      <audio ref={audioRef} src={src} style={{ display: 'none' }} />
    </div>
  );
};
export default AutoPlayAudio;

// const App = () => {
//   const [audioUrl, setAudioUrl] = React.useState(
//     'http://aipe-speech.bj.bcebos.com/text_to_speech/initial-url/audio.mp3' // 初始音频URL
//   );

//   // 假设有一个函数来改变 audioUrl，这里只是为了示例
//   const changeAudioUrl = () => {
//     setAudioUrl(
//       'http://aipe-speech.bj.bcebos.com/text_to_speech/2025-02-06/67a412beb98eeb0001b7c694/speech/0.mp3?authorization=bce-auth-v1%2FALTAKjI91nE52nvtDNRgFlUCVz%2F2025-02-06T01%3A39%3A15Z%2F259200%2F%2F5f10c221dda5d8df48a19f369c110cd54820291d91173424f6de47548c5031f1' // 新音频URL
//     );
//   };

//   return (
//     <div>
//       <h1>音频播放器</h1>
//       <AutoPlayAudio src={audioUrl} />
//       <button onClick={changeAudioUrl}>更换音频</button>
//     </div>
//   );
// };

// export default App;